<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Xenon Boostrap Admin Panel" />
<meta name="author" content="" />

<title>Xenon - Data Tables</title>

<link rel="stylesheet"
	href="http://fonts.useso.com/css?family=Arimo:400,700,400italic">
<link rel="stylesheet" href="assets/css/fonts/linecons/css/linecons.css">
<link rel="stylesheet"
	href="assets/css/fonts/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/xenon-core.css">
<link rel="stylesheet" href="assets/css/xenon-forms.css">
<link rel="stylesheet" href="assets/css/xenon-components.css">
<link rel="stylesheet" href="assets/css/xenon-skins.css">
<link rel="stylesheet" href="assets/css/custom.css">

<script src="assets/js/jquery-1.11.1.min.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
	<![endif]-->
<!-- Bottom Scripts -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/TweenMax.min.js"></script>
<script src="assets/js/resizeable.js"></script>
<script src="assets/js/joinable.js"></script>
<script src="assets/js/xenon-api.js"></script>
<script src="assets/js/xenon-toggles.js"></script>
<script src="assets/js/datatables/js/jquery.dataTables.min.js"></script>
<!-- Imported scripts on this page -->
<script src="assets/js/datatables/dataTables.bootstrap.js"></script>
<script src="assets/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
<script
	src="assets/js/datatables/tabletools/dataTables.tableTools.min.js"></script>
<!-- JavaScripts initializations and stuff -->
<script src="assets/js/xenon-custom.js"></script>
</head>
<body class="page-body">
	<div class="page-container">
		<!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->
		<div class="main-content">
			<!-- Table exporting -->
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">Table exporting</h3>

					<div class="panel-options">
						<a href="#" data-toggle="panel"> <span class="collapse-icon">&ndash;</span>
							<span class="expand-icon">+</span>
						</a> <a href="#" data-toggle="remove"> &times; </a>
					</div>
				</div>
				<div class="panel-body">
					<table class="table table-bordered table-striped" id="example-4">
						<thead>
							<tr>
								<th>Name</th>
								<th>Position</th>
								<th>Office</th>
								<th>Age</th>
								<th>Start date</th>
								<th>Salary</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		jQuery(document)
				.ready(
						function($) {
							$("#example-4")
									.dataTable(
											{
												dom : "<'row'<'col-sm-5'l><'col-sm-7'Tf>r>t<'row'<'col-xs-6'i><'col-xs-6'p>>",
												tableTools : {
													sSwfPath : "assets/js/datatables/tabletools/copy_csv_xls_pdf.swf"
												},
												"bProcessing" : false, // 是否显示取数据时的那个等待提示
												"bServerSide" : true,//这个用来指明是通过服务端来取数据
												"sAjaxSource" : "test/table",//这个是请求的地址
												"fnServerData" : retrieveData// 获取数据的处理函数
											}).yadcf([ {
										column_number : 0,
										data : [ "Trident", "No" ],
										filter_default_label : "Select Yes/No"
									}, {
										column_number : 1,
										filter_type : 'text'
									}, {
										column_number : 2,
										filter_type : 'text'
									}, {
										column_number : 3,
										filter_type : 'range_number'
									}, {
										column_number : 4
									}, {
										column_number : 5
									} ]);
							;
							// 3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
							function retrieveData(sSource111, aoData111,
									fnCallback111) {
								$.post(sSource111, {//这个就是请求地址对应sAjaxSource
									"aoData" : aoData111
								//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
								}, function(result) {
									var data = eval("(" + result + ")");
									fnCallback111(data);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
								});
							}
						});
	</script>
</body>
</html>